<script lang="ts" setup>
  import { onMounted } from 'vue'
  import * as echarts from 'echarts'
  import { useRouter } from 'vue-router'
  const router = useRouter()

  // 绘制图表
  const myEchartCake = () => {
    let mychart = echarts.init(document.getElementById("echartCake") as HTMLElement, 'dark')
    mychart.setOption({
      backgroundColor: '#1d3043',
      tooltip: {
          trigger: 'item'
      },
      grid: {
          top: '5%',
          left: '8%',
          right: '5%',
          bottom: '8%'
      },
      xAxis: {
          type: 'category',
          name: '层',
          data: ['一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四','十五','十六','十七','十八']
      },
      yAxis: {
          type: 'value',
          name: '人数',
      },
      series: [{
          data: [2394,8853,9237,3994,7238,8374,9753,4759,9823,6283,1837,2734,4853,2374,4583,3845,5932,3745],
          type: 'bar'
      }]
    })
  }
  onMounted(() => {
    myEchartCake()
  })

  // 调整更多
  const toMore = () => {
    router.push('/layout/infernal/user')
  }
</script>

<template>
  <div class="z-col home-cake z-flex-column">
    <div class="z-flex-justify-between z-flex-align-center box">
      <span class="z-t-bold">十八层地狱（人数/层）</span>
      <div class="findmore" @click="toMore">查看更多<el-icon><Icon icon="ArrowRight"/></el-icon></div>
    </div>
    <div class="home-cake-map z-flex-1 box">
      <div id="echartCake" style="width: 100%;height: 100%;"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .home-cake{
    height: 310px;
  }
</style>